<template>
    <w-tab-list @clear-search="clearSearch(true)"
                @clear-selection="clearSelection"
                @refresh-data="refreshData(true)"
                @switch-page="switchPage"
                @search-active="searchActive"
                @delete-batch="removeClick"
                @open-add-from="addGs"
                add-bn-text="新增物品"
                remove-bn-text="删除物品"
                :total="paging.total"
                :page-size="paging.pageSize"
                :frame="false"
    >
        <template #searchItem>
            <ul style="float:left;">
                <li>
                    物品名称：
                    <el-input type="text" placeholder="请输入物品名称" class="sh" v-model="search.name"/>
                </li>
                <li style="margin-left: 10px">
                    状态：
                    <el-select-v2 v-model="search.enabled" :options="options_1" filterable  placeholder="请选择"/>
                </li>
                <li style="margin-left: 10px">
                    类别：
                    <el-select-v2 v-model="search.gsClassifyId" :options="options" filterable placeholder="请选择"/>
                </li>
            </ul>
        </template>
        <template #batchOperationItem>
            <el-button type="success" :icon="Edit" @click="baoyi(20)" >物品报溢</el-button>
            <el-button type="warning" :icon="Remove" @click="baosun(5)">物品报损</el-button>
        </template>
        <template #dataList>
            <el-table stripe :data="gsData" @selection-change="saveSelection" :header-cell-style="{textAlign: 'center'}"
                      :cell-style="{ textAlign: 'center' }" v-loading="loading.value" ref="gsTable">
                <el-table-column type="index" width="20">
                    <template #default="s">
                        <span class="line-num">{{s.$index+1}}</span>
                    </template>
                </el-table-column>
                <el-table-column type="selection" width="40"/>
                <el-table-column label="编号" prop="id" width="60px"/>
                <el-table-column label="物品编码" prop="code"/>
                <el-table-column label="物品名称" prop="name"/>
                <el-table-column label="规格" prop="spec"/>
                <el-table-column label="物品单价/元">
                    <template #default="s">
                        <template v-if="s.row.unitPrice !== null">
                            {{ s.row.unitPrice.toFixed(2) }} 元
                        </template>
                        <template v-else>
                            无
                        </template>
                    </template>
                </el-table-column>
                <el-table-column label="状态" width="140px">
                    <template #default="scope">
                        <el-switch v-model="scope.row.enabled"
                                   :active-value="1"
                                   :inactive-value="2"
                                   active-text="正常"
                                   inactive-text="停用"
                                   :before-change="switchEnabled"
                                   @change="enableChange($event,scope.row)"
                                   size="small"
                        />
                    </template>
                </el-table-column>
                <el-table-column label="类别" width="100px" prop="gsType.name"  />
              <el-table-column label="库存" prop="num">
                <template #default="s">
                  <template v-if="s.row.num<=5">
                    <el-popover effect="light" trigger="hover" placement="top">
                      <template #default>
                        当前数量为：
                        <el-tag type="danger">{{s.row.num}}</el-tag>
                      </template>
                      <template #reference>
                        <div class="name-wrapper">
                          <el-tag type="danger">数量较低</el-tag>
                        </div>
                      </template>
                    </el-popover>
                  </template>
                  <template v-else>
                    {{ s.row.num }}
                  </template>
                </template>


              </el-table-column>
                <el-table-column label="创建时间" prop="createTime" width="180"/>
                <el-table-column label="操作" width="200">
                    <template #default="s">
                            <el-button type="text" size="small" @click="editClick(s.row)" :icon="Edit">编辑</el-button>
                            <el-button type="text" size="small" @click="removeClick(s.row)" :icon="Delete">删除</el-button>
                            <!--              <el-button type="text" size="small" :icon="DArrowRight">更多</el-button>-->
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </w-tab-list>
    <gs-form width="50%" @refresh-data="refreshData" ref="gsForm"/>
<!--    <gs-loss-form/>-->
</template>

<script>
import {
    Search,
    Refresh,
    RefreshRight,
    CollectionTag,
    Delete,
    Plus,
    Edit,
    DArrowRight,
    Picture,
    Failed,
    Remove
} from '@element-plus/icons-vue'
import {ElMessage} from 'element-plus'
import WTabList from "../../../com/WTabList.vue";
import GsForm from "./form/GsForm.vue";
import {deleteGs, getGsPageInfo, updateGs} from "../../../../network/adm/gs";
import GsLossForm from "./form/GsLossForm.vue";

export default {
    name: "GsBaseInfo",
    components: {
        GsLossForm,
        GsForm,
        WTabList
    },
    setup(props) {
        return {
            Search, Refresh, RefreshRight, CollectionTag, Delete, Plus, Edit, DArrowRight, Picture, Failed, Remove
        }
    },
    data() {
        return {
            gsData: [],
            selection: [],
            paging: {
                total: 0,//记录总数
                pageSize: 5,//每页记录数
                pageNum: 1,//当前页码
                pagerCount: 8,//最大页码按钮数，限定在(5 ≤ x ≤ 21 的奇数)
            },
            options: [
                {
                    value: 1,
                    label: '消耗品',
                },
                {
                    value: 2,
                    label: '耐用品',
                },
            ],
            options_1: [
                {
                    value: 1,
                    label: '正常',
                },
                {
                    value: 2,
                    label: '停用',
                },
            ],
            search: {
                name: '',
                gsClassifyId: '',
                enabled: '',
                num:'',
            },
            loading: {
                value: false
            }
        }
    },
    methods: {
        /*1、搜索框管理*/
        //搜索执行函数
        searchActive() {
            async function a(){
                console.log('请求1：')
                return 2;
            }
            console.log('d')

            this.$utils.searchActive({
                data: this.search,
                initData: this.$options.data.call(this).search,
                executeFn: () => {
                    this.refreshData();
                }
            })
        },
        //清空搜索框
        clearSearch(hint) {
            this.$utils.resetSearchParams({
                initData: this.$options.data.call(this).search,
                data: this.search,
                hint: hint,
                callback: () => {
                    this.refreshData();
                }
            });
        },
        /*2.数据操作*/
        addGs() {
            let frm = this.$refs.gsForm;
            frm.visible = true;
            frm.title = '添加物品';
            frm.type = 0;
        },
        //编辑记录
        editClick(row) {
            let frm = this.$refs.gsForm;
            frm.visible = true;
            frm.title = '修改物品';
            frm.type = 1;
            this.$nextTick(function (){
                frm.setObj(row);
            })
        },
        removeClick(row) {
            if (row) {
                this.$operate.remove({
                    title: '删除物品',
                    data: `物品 '${row.name}' `,
                    executeFn: () => {
                        this.remove([row.id]);
                    }
                })
            } else {
                this.$operate.removeBatch({
                    title: '删除物品',
                    selection: this.selection,
                    key: 'id',
                    executeFn: (ids) => {
                        this.remove(ids);
                    }
                })
            }
        },
        remove(ids) {
            deleteGs(ids).then(vo => {
                this.$response.handle({
                    data: vo,
                    success: '删除成功',
                    successFn: () => {
                        this.refreshData();
                    }
                })
            })
        },
        //修改物品状态
        switchEnabled() {
            return this.$operate.switchStatus({
                title: '修改物品状态',
                hint: '确定要更改该物品的状态吗'
            });
        },
        //修改物品状态执行
        enableChange($event, row) {
            updateGs({id: row.id, enabled: $event}).then(data => {
                this.$response.handle({
                    data: data,
                    success: '修改成功',
                    error:'修改失败',
                    successFn: () => {
                        this.refreshData();
                    },
                })
            })
        },
        /*3.分页管理*/
        //切换页面
        switchPage(index) {
            this.paging.pageNum = index;
            this.loadGsPageInfo();
        },
        /*4.表格管理*/
        //刷新表格数据
        refreshData(hint) {
            this.loadGsPageInfo(hint);
        },
        //保存用户选中行数据
        saveSelection(selection) {
            this.selection = selection;
        },
        clearSelection() {
            this.$refs.gsTable.clearSelection();
        },
        /*6.数据加载项*/
        loadGsPageInfo(hint) {
            getGsPageInfo({
                pageNum: this.paging.pageNum,
                pageSize: this.paging.pageSize,
                name: this.search.name,
                gsClassifyId: this.search.gsClassifyId,
                enabled: this.search.enabled
            }).then(data => {
                console.log('物品信息：', data);
                this.gsData = data.list;
                this.paging.total = data.total;
                if (hint) {
                    ElMessage.success('刷新成功')
                }
            })
        },
        /*7.报溢*/
      baoyi(type){
        // let params={
        //   pageNum:this.paging.pageNum,
        //   pageSize: this.paging.pageSize,
        //   num: type,
        // }
        // getGsPageInfo(params).then(data=>{
        //   this.gsData= data.list;
        //   this.paging.total=data.total;
        //   console.log(this.gsData)
        // })
      },
        /*8.报损*/
      baosun(type){
        let params={
          pageNum:this.paging.pageNum,
          pageSize: this.paging.pageSize,
          num: type,
        }
        getGsPageInfo(params).then(data=>{
        this.gsData= data.list;
        this.paging.total=data.total;
          console.log(this.gsData)
        })
        },
        init() {
            this.loadGsPageInfo();
        }
    },
    created() {
        this.init();
    }
}
</script>

<style scoped>
.tab-list {
    height: 99%;
}

.sh {
    width: 180px;
}

.el-select-dropdown__item {
    width: 100%;
    color: darkgray;
}

.el-select {
    width: 120px;
}

.add-bn {
    color: var(--el-button-hover-text-color);
    border-color: var(--el-button-hover-border-color, var(--el-button-hover-bg-color));
    background-color: var(--el-button-hover-bg-color);
    outline: 0;
}

.batch-delete-bn:hover, .add-bn:hover {
    opacity: 0.6;
}
.batch-delete-bn{
    color: #ff9292;
    background-color: #ffeded;
    border-color: #ffdbdb;
}
.line-num{
    color: #a5a5a594;
}
</style>
